<!--用户信息页面-->
<template>
	<div class="app-container">
		<div class="app-box">
			<!--搜索框-->
			<div class="formSearch">
				<div class="formSearchDiv searchtxtdiv wd230"><el-input class="searchtxtinput wd230" v-model='searchTxt' type='text' placeholder='请输入手机号/姓名/身份证号' size='mini'></el-input></div>
				<div class="formSearchDiv">
					<el-button type='primary' size='mini' @click='search'>搜索</el-button>
				</div>
			</div>
			
			<!--table-->
			<template>
			  <el-table :data="userList" style="width: 100%"  :stripe='true' 
					@expand-change='toggleRowExpansion' v-loading='loading'
					:row-key="getRowKeys" :expand-row-keys="expands" class="payuserTbale">
				<el-table-column label="姓名" prop="name">
					<template slot-scope='scope'>
			    		<p v-if="scope.row.name!=null">{{scope.row.name}}</p>
			    		<p v-if="scope.row.name==null">-</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="手机号" min-width='120px'>
			    	<template slot-scope='scope'>
			    		<p v-if="scope.row.phoneNumber!=''">{{scope.row.phoneNumber}}</p>
			    		<p v-if="scope.row.phoneNumber==''">-</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="身份证号" min-width='180px'>
			    	<template slot-scope='scope'>
			    		<p v-if="scope.row.identityCard!=''">{{scope.row.identityCard}}</p>
			    		<p v-if="scope.row.identityCard==''">-</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="银行卡" min-width='150px'>
			    	<template slot-scope='scope'>
			    		<p class="bankNamep">
			    		<span v-if="scope.row.bankName!=null">{{scope.row.bankName}}</span>
			    		<span v-if="scope.row.bankName==null">-</span>
			    		</p>
			    		<p class="bankCodep">
			    		<span v-if="scope.row.bankCode!=''">{{scope.row.bankCode}}</span>			    		
			    		<span v-if="scope.row.bankCode==''">-</span>
			    		</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="注册状态" prop="">
			    	<template slot-scope='scope'>
			    		<p v-if="scope.row.registrationState==0">
			    			<i class="icon iconfont icon-icon01"  style="color:#389E0D;position: relative;top: 1px;"></i>
			    			成功
			    		</p>
			    		<p v-if="scope.row.registrationState==1">
			    			<i class="icon iconfont icon-icon01" style="color:#FF7819;position: relative;top: 1px;"></i>
			    			待完善
			    		</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="余额" align='right' width="120px">
			    	<template slot-scope='scope'>
			    		<p class="">{{scope.row.balance | moneydou}}</p>
			    	</template>
			    </el-table-column>
			    <el-table-column label="注册日期" prop="creationTime" min-width='120px' align='right'>
			    </el-table-column>
			    <el-table-column label="操作 " width='150px' align='right'>
			    	<template slot-scope="scope">
			    		<p v-if="scope.row.registrationState==0">
			    			<a class="truePay" @click="trunPay(scope.row.id)">转账 </a>
			    			<a class='todetail' @click="todetail(scope.row.id)">详情 </a>
			    		</p>
			    		<p v-if="scope.row.registrationState==1">
			    			<a class="truePay">- </a>
			    			<a class='todetail'>- </a>
			    		</p>
			    		
			    	</template>
			    </el-table-column>
			  </el-table>
			  <!--el循环列表数据end-->
              <div v-if="userList.length!=0" class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>

              </div>
			</template>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
export default{
	data(){
		return{
			loading:false,
			loading2:false,
			data:{},
			vaule:'',
			searchTxt:'',
			userList:[],
			currentPage:1,
	        getDetaId:'',
	        noneshow:false,
	        page:1
		}
	},
	mounted(){
		if(this.$route.query.page){
			this.page = this.$route.query.page
		}
		if(this.$route.query.key){
			this.searchTxt = this.$route.query.key
		}		
		this.getuserList(this.page,this.searchTxt);
	},
	watch: {
	    '$route' (to, from) {
	        //this. .go(0);
	        this.page = this.$route.query.page
	        this.searchTxt = this.$route.query.key
	        this.getuserList(this.page,this.searchTxt)
	    }
	},
	filters: {
        moneydou(val){
        	val = val.toString().replace(/\$|\,/g,'');
		    if(isNaN(val)) {
		      val = "0";  
		    } 
		    let sign = (val == (val = Math.abs(val)));
		    val = Math.floor(val*100+0.50000000001);
		    let cents = val%100;
		    val = Math.floor(val/100).toString();
		    if(cents<10) {
		       cents = "0" + cents
		    }
		    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
		        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
		    }
		
		    return (((sign)?'':'-') + val + '.' + cents);
		}
    },
	methods:{
		//获取用户列表
		getuserList(page,key){
			this.loading = true;
			let params = {
	  			pageIndex:page,
	        	keyWord:key
	  		}
	      	this.post(params, "services/app/applets/AppUsers").then(response => {
	      		this.loading = false;
		        if (response.success) {
//		        	this.expands = [];
		        	console.log(response.result.items)
		            this.userList = response.result.items;
		            this.pagetotal = response.result.totalCount;
		            this.currentPage= page
		            //this.currentPage= this.page
		        }
		    });
	    },
	    handleCurrentChange(val) {
	      this.$router.push({
				name:'payuser',
				query:{
					page:val,
					key:this.searchTxt,
					time: new Date().getTime(),
				}
			})
	    },
	    //搜索
	    search(){
	    	this.$router.push({
				name:'payuser',
				query:{
					page:1,
					key:this.searchTxt,
					time: new Date().getTime(),
				}
			})
	    },
	    trunPay(id){
	    	this.$router.push({
	    		name:'manageIndex',
	    		// query:{
	    		// 	id:id
	    		// }
	    	})
	    },
	    todetail(id){
	    	this.$router.push({
	    		name:'payuserdetail',
	    		query:{
	    			userId:id,
	    			name:'payuser',
	    			query:this.$route.query
	    		}
	    	})
	    }
			
	}
}
</script>

<style lang="scss" scoped>
.wd230{width: 230px;}
.numberRight{text-align: right;}
.app-box{
	/*padding: 30px 20px 32px 20px;*/
	.formSearch{
		width: 450px;height:58px;/*padding-top:20px;*/
		.formSearchDiv{
			display: inline-block;
		}
		.searchtxtdiv{
			width: 230px;margin-right:10px;
			.searchtxtinput{font-size: 13px;}
		}
	}
	.page-right{
        text-align: right;
        margin-top: 30px;
    }
    .margintbnone{margin-top: 0;margin-bottom: 0;}
    .colorgreen{color: #00cc00;}
    .colorred{color: #ff0000;}
    .truePay{margin-right: 10px;color: #027dca;}
    .todetail{color: #027dca;}
    .bankNamep,.bankCodep{margin: 0;}
    .bankNamep{margin-top: 5px;}
    .bankCodep{margin-bottom: 4px;}
    .bankCodep{color: #999999;}
}	
</style>